<script setup>
 import { UserFilled } from '@element-plus/icons-vue'
</script>

<template>
  <div class="Me">
    <div class="container">
      <!--用户信息 -->
      <div class="user">
           <!-- 用户头像 -->
        <div class="userImg">
       
          <div class="demo-type">
            <div>
              <el-avatar
                src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
              />
            </div>  
          </div>
        </div>
        <!-- 用户基础信息 -->
        <div class="user_Info">
          <!-- 用户Id -->
        <p class="user_Id">你好</p>  
        <!-- 用户email -->
        <p class="user_email">email</p>
        </div>
      </div>
      <!-- NFC- -->
      <div class="NFC">
        <!--标题 -->
        <div class="title">
            <i class="iconfont icon-nfc"></i>
            <span class="txt">我的NFC</span>
        </div>
        
        <!-- NFC -->
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  .Me{
    position: relative;
    background-color: pink;
    width: 100%;
    height: 1000px;

    .container{
      margin: 0 auto;
     width: 1240px;
     height: 1000px;
     background-color: white;


    //用户基本信息
    .user{
      height: auto;
      width: 100%;
      background: paleturquoise;
      .userImg{
        // 用户头像
        .demo-type {
          display: flex;
         
           .el-avatar {
            --el-avatar-size:100px;
            }      
           }
           div {
              margin-top: 10px;
              flex: 1;
              text-align: center;
          }
          div:not(:last-child) {
              border-right: 1px solid var(--el-border-color);
            }
      }

      // 用户基本信息
      .user_Info{
        margin-top: 10px;
        width: 100%;
        height: auto;
        
        text-align: center;

        // 用户id
        .user_Id{
          font-size: 30px;
          margin:10px 0;
        }
        // 用户email
        .user_email{
          font-size: 30px;
        }
      }

    }

    // 个人NFC
    .NFC{
      width: 100%;
      height: 300px;
      background: palegoldenrod;
      .title{
      padding-top: 20px;
      width: 300px;
      height: 70px;
      border-bottom: 2px solid paleturquoise;

      .iconfont{
        font-size: 30px;
        padding-left:10px;
        color:paleturquoise ;
      }

      .txt {
        font-size: 25px;
        padding-left:10px;
      }
      }
    }
    }
  }

</style>